<template>
	<div style="width: 100%; height: 1000px;">
		<div class="my-body_center">

			<div class="ipt_a">
				<div style="float: left; line-height: 30px;" class="tab_font-size">经销商：</div>
				<el-input v-model="input" placeholder="请输入内容"
					style=" width: 150px;height: 50px; float: left;"></el-input>
			</div>
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;" class="tab_font-size">积分状态：</div>
				<el-select v-model="value" placeholder="请选择授权状态" style="width: 150px;">
					<el-option label="全部" value="beijing"></el-option>
					<el-option label="发放审核中" value="shanghai"></el-option>
					<el-option label="发放完成" value="beijing"></el-option>

				</el-select>
			</div>
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;" class="tab_font-size">年度：</div>
				<div class="block">

					<el-date-picker v-model="value1" type="date" placeholder="选择日期" style="width: 150px;">
					</el-date-picker>
				</div>
			</div>
			<div class="ipt_a">
				<el-button type="primary" plain>查询</el-button>
				<el-button>清空</el-button>
			</div>


			<div style="width: 100%;  float: left;">
				<div><el-button type="primary" plain>数据导出</el-button></div>

				<div style="float: left; width: 30%;">
					<template>
						<el-table :data="tableData" border style="width: 100%;margin-top: 30px;" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
							<el-table-column prop="bianhao" label="编号" width="150">
							</el-table-column>
							<el-table-column prop="senddate" label="经销商" width="120">
							</el-table-column>

						</el-table>
					</template>
				</div>
				<div style="float: left; width: 69%; margin-left: 1%;">
					<template>
						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%;margin-top: 30px;" >
							<el-table-column prop="bianhao" label="授权编号" width="150">
							</el-table-column>
							<el-table-column prop="senddate" label="授权医院或地区" width="120">
							</el-table-column>
							<el-table-column prop="senddate" label="总申请积分" width="120">
							</el-table-column>
							<el-table-column prop="senddate" label="已发放积分" width="120">
							</el-table-column>
							<el-table-column prop="senddate" label="采购指标" width="120">
							</el-table-column>
						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5]" :page-size="pageSize"
							:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
					</template>
					
				</div>
				
			</div>
             <div style="margin-top: 20px; float: left;">经销商积分信息:
             	经销商[成都鑫佑康贸易有限公司】
             	授权医院【成都市温江
             	人民医院)</div>
           <div style="float: left; width: 100%;">
           	<template>
           		<el-table :data="tableData" border style="width: 100%;margin-top: 30px;" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
           			<el-table-column prop="bianhao" label="发放使用日期">
           			</el-table-column>
           			<el-table-column prop="senddate" label="积分申领编号">
           			</el-table-column>
           			<el-table-column prop="senddate" label="使用积分" >
           			</el-table-column>
           			<el-table-column prop="senddate" label="积分申请类型">
           			</el-table-column>
           			<el-table-column prop="senddate" label="积分隶属日期">
           			</el-table-column>
           		</el-table>
           	</template>
           </div>
		</div>
		<div class="my-body_center">
			<div style="width: 99%; height: 20px ;  text-align: center;  font-size: 20px;">
				总申领积分：【2000】 已发放积分【0】
			</div>
			<div style="width: 99%; height: 100px ; margin-left: 1%; ">
				<div style="width: 100%; height: 20px;">
					<div style="float: left; width: 50%; ">
						<div style="float: left; margin-top: 10px;">总植入量【0】</div>
						<div style="padding: 5px 10px; background: orchid; float: left; color: #fff; margin-top: 5px;border-radius: 5px;border-radius: 5px;" @click="area = true">明细</div>
					</div>
					<div style="float: left; width: 50%; ">
						
						
						<div style="padding: 5px 10px; background: lightseagreen; float: right; color: #fff; margin-top: 5px;border-radius: 5px;">取消对冲</div>
						<div style="padding: 5px 10px; background: sandybrown; float: right; color: #fff; margin-top: 5px;border-radius: 5px; ">积分对冲</div>
					</div>
				</div>
				<el-dialog title="申请" :visible.sync="area" width="50%" :before-close="handleClose">
					<div style="width: 100%;">
						<el-form ref="form" :model="form" label-width="150px">
							<el-form-item label="医院名称">
								<el-input v-model="form.name" style="width:200px;"></el-input>
								<el-button type="primary">查询</el-button>
								<el-button type="primary">清空</el-button>
							</el-form-item>
							<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
								style="width: 100%">
								<el-table-column type="selection" width="55">
								</el-table-column>
							
								<el-table-column prop="senddate" label="医院名称" width="120">
								</el-table-column>
								<el-table-column fixed prop="bianhao" label="术者名称" width="150">
								</el-table-column>
								<el-table-column prop="enddate" label="手术类型" width="120">
								</el-table-column>
								<el-table-column prop="name" label="手术日期" width="120">
								</el-table-column>
								<el-table-column prop="province" label="成功" width="120">
								</el-table-column>
							    <el-table-column prop="province" label="带教专家名称" width="120">
							    </el-table-column>
							</el-table>
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="currentPage" :page-sizes="[5]" :page-size="pageSize"
								:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
							</el-pagination>
						</el-form>
				
					</div>
				</el-dialog>
				<template>
					<el-table :data="tableData" border style="width: 100%;margin-top: 30px;" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
						<el-table-column prop="bianhao" label="申请类型"  width="200">
						</el-table-column>
						<el-table-column prop="senddate" label="积分"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="审核状态"  width="120" >
							 <el-button>发放审核中</el-button>
						</el-table-column>
						<el-table-column prop="senddate" label="有效起始时间"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="有效终止时间"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="凭证"  width="120">
							 <el-button>无凭证</el-button>
						</el-table-column>
						<el-table-column prop="senddate" label="拒绝理由"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="备注"  width="120">
						</el-table-column>
					</el-table>
				</template>
				<div style="width: 100%; height: 20px;">
					<div style="float: left; width: 50%; ">
						<div style="float: left; margin-top: 10px;">Q1植入量【0】</div>
						<div style="padding: 5px 10px; background: orchid; float: left; color: #fff; margin-top: 5px;border-radius: 5px;">明细</div>
						<div style="float: left; margin-top: 10px;">植入指标【0】</div>
					</div>
					<div style="float: left; width: 50%; ">
						
						
						<div style="padding: 5px 10px; background: lightseagreen; float: right; color: #fff; margin-top: 5px;border-radius: 5px;">取消对冲</div>
						<div style="padding: 5px 10px; background: sandybrown; float: right; color: #fff; margin-top: 5px;border-radius: 5px; ">积分对冲</div>
					</div>
				</div>
				<template>
					<el-table :data="tableData" border style="width: 100%;margin-top: 30px;" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
						<el-table-column prop="bianhao" label="申请类型" width="200">
						</el-table-column>
						<el-table-column prop="senddate" label="积分"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="审核状态"  width="120" >
							 <el-button>发放审核中</el-button>
						</el-table-column>
						<el-table-column prop="senddate" label="有效起始时间"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="有效终止时间"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="凭证"  width="120">
							 <el-button>无凭证</el-button>
						</el-table-column>
						<el-table-column prop="senddate" label="拒绝理由"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="备注"  width="120">
						</el-table-column>
					</el-table>
				</template>
				<div style="width: 100%; height: 20px;">
					<div style="float: left; width: 50%; ">
						<div style="float: left; margin-top: 10px;">Q2植入量【0】</div>
						<div style="padding: 5px 10px; background: orchid; float: left; color: #fff; margin-top: 5px;border-radius: 5px;">明细</div>
						<div style="float: left; margin-top: 10px;">植入指标【0】</div>
					</div>
					<div style="float: left; width: 50%; ">
						
						
						<div style="padding: 5px 10px; background: lightseagreen; float: right; color: #fff; margin-top: 5px; border-radius: 5px;">取消对冲</div>
						<div style="padding: 5px 10px; background: sandybrown; float: right; color: #fff; margin-top: 5px; border-radius: 5px; ">积分对冲</div>
					</div>
				</div>
				<template>
					<el-table :data="tableData" border style="width: 100%;margin-top: 30px;" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
						<el-table-column prop="bianhao" label="申请类型" width="200">
						</el-table-column>
						<el-table-column prop="senddate" label="积分"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="审核状态"  width="120" >
							 <el-button>发放审核中</el-button>
						</el-table-column>
						<el-table-column prop="senddate" label="有效起始时间"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="有效终止时间"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="凭证"  width="120">
							 <el-button>无凭证</el-button>
						</el-table-column>
						<el-table-column prop="senddate" label="拒绝理由"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="备注"  width="120">
						</el-table-column>
					</el-table>
				</template>
				<div style="width: 100%; height: 20px;">
					<div style="float: left; width: 50%; ">
						<div style="float: left; margin-top: 10px;">Q3植入量【0】</div>
						<div style="padding: 5px 10px; background: orchid; float: left; color: #fff; margin-top: 5px;border-radius: 5px;">明细</div>
						<div style="float: left; margin-top: 10px;">植入指标【0】</div>
					</div>
					<div style="float: left; width: 50%; ">
						
						
						<div style="padding: 5px 10px; background: lightseagreen; float: right; color: #fff; margin-top: 5px;border-radius: 5px;">取消对冲</div>
						<div style="padding: 5px 10px; background: sandybrown; float: right; color: #fff; margin-top: 5px;border-radius: 5px; ">积分对冲</div>
					</div>
				</div>
				<template>
					<el-table :data="tableData" border style="width: 100%;margin-top: 30px;" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
						<el-table-column prop="bianhao" label="申请类型" width="200">
						</el-table-column>
						<el-table-column prop="senddate" label="积分"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="审核状态"  width="120" >
							 <el-button>发放审核中</el-button>
						</el-table-column>
						<el-table-column prop="senddate" label="有效起始时间"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="有效终止时间"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="凭证"  width="120">
							 <el-button>无凭证</el-button>
						</el-table-column>
						<el-table-column prop="senddate" label="拒绝理由"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="备注"  width="120">
						</el-table-column>
					</el-table>
				</template>
				<div style="width: 100%; height: 20px;">
					<div style="float: left; width: 50%; ">
						<div style="float: left; margin-top: 10px;">Q4植入量【0】</div>
						<div style="padding: 5px 10px; background: orchid; float: left; color: #fff; margin-top: 5px;border-radius: 5px;">明细</div>
						<div style="float: left; margin-top: 10px;">植入指标【0】</div>
					</div>
					<div style="float: left; width: 50%; ">
						
						
						<div style="padding: 5px 10px; background: lightseagreen; float: right; color: #fff; margin-top: 5px;border-radius: 5px;">取消对冲</div>
						<div style="padding: 5px 10px; background: sandybrown; float: right; color: #fff; margin-top: 5px;border-radius: 5px; ">积分对冲</div>
					</div>
				</div>
				<template>
					<el-table :data="tableData" border style="width: 100%;margin-top: 30px;" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
						<el-table-column prop="bianhao" label="申请类型"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="积分"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="审核状态"  width="120" >
							 <el-button>发放审核中</el-button>
						</el-table-column>
						<el-table-column prop="senddate" label="有效起始时间"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="有效终止时间"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="凭证"  width="120">
							 <el-button>无凭证</el-button>
						</el-table-column>
						<el-table-column prop="senddate" label="拒绝理由"  width="120">
						</el-table-column>
						<el-table-column prop="senddate" label="备注"  width="120">
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	export default {

		data() {

			return {
				area: false,
				tablisty: false,
				tablistya: false,
				tablistyb: false,
				key: 1, // 为了能每次切换权限的时候重新初始化指令
				options: [{
					value: '1',
					label: '全部'
				}, {
					value: '2',
					label: '一般订单'
				}, {
					value: '3',
					label: '积分订单'
				}, {
					value: '3',
					label: '样品订单'
				}, {
					value: '3',
					label: '换货订单'
				}],
				value1: '',
				value2: '',
				value3: '',
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				radio: '授权医院',
				value: '',
				key: 1, // 为了能每次切换权限的时候重新初始化指令
				options: [{
					value: '1',
					label: '全部'
				}, {
					value: '2',
					label: '已签收'
				}, {
					value: '3',
					label: '未签收'
				}],
				data: [{
					label: '中国大陆',
					children: [{
						label: '上海',
					},{
						label: '北京',
					},
					{
						label: '四川',
					}
					]
				}],
				 value1: '',
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				value: '',
				chanpingguige:false,
				dialogVisible: false,
				dialogVisiblea: false,
				hospital: false,
				area: false,
				currentPage: 1,
				pageSize: 2,
				jinxiaoshang: false,
				shouhuor: false,
				diquxuanzhe: false,
				tableData: [{
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}],
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				sizeForm: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},

			}
		},
		methods: {
			handleClick(row) {
				console.log(row);
			},
			handleCheckAllChange(val) {
				const cityOptions = ['上海', '北京', '广州', '深圳']
				console.log(val)
				this.checkedCities = val ? cityOptions : [];

				this.isIndeterminate = false;
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ipt_a {
		width: 240px;
		height: 50px;
		float: left;
	}

	.ipt_b {
		width: 450px;
		height: 50px;
		float: left;
	}
</style>